import React, { Component } from 'react';
import {
    View, Text, TouchableOpacity, Dimensions
} from 'react-native';
import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view';

import { scaleSize, scaleFontSize } from '../util/size';
import { IReduxMarketItem, IReduxMarketInfo } from '../interface';
import { AVALIABLE_COIN_TYPES } from '../util/constants';
import { utilGetMarketInfoByCoinType } from '../util/marketUtil';

const deviceScreen = Dimensions.get('window');


type onPressType = (payType: string, targetType: string) => void

interface IProps {
    // isOpen: boolean,
    // styles: ViewStyle,
    // menuPosition: 'left' | 'right',
    // onChange: Function,
    onPress: onPressType,
    marketInfo: IReduxMarketInfo,
}

interface preHandleAfter {
    [key: string]: Array<IReduxMarketItem>,
}

interface IState {

}

const testData = {
    Favorites: [{
        type: 'BTC/USDT',
        price: 7777.4,
        extent: '+0.17%'
    }],
    USDT: [
        {
            type: 'BCH',
            price: 77.4,
            extent: '+0.6%',
        },
        {
            type: 'ETH',
            price: 443.4,
            extent: '-0.6%',
        },
        {
            type: 'BCH',
            price: 55.4,
            extent: '+0.6%',
        },
        {
            type: 'EOS',
            price: 5225.4,
            extent: '+6.3%',
        },
        {
            type: 'ETC',
            price: 31223423,
            extent: '-9.5%'
        }
    ],
    BTC: [
        {
            type: 'BCH',
            price: 77.4,
            extent: '+0.6%',
        },
        {
            type: 'ETH',
            price: 443.4,
            extent: '-0.6%',
        },
        {
            type: 'BCH',
            price: 55.4,
            extent: '+0.6%',
        },
        {
            type: 'EOS',
            price: 5225.4,
            extent: '+6.3%',
        }
    ],
}

class CoinTypeSelect extends Component<IProps, IState> {
    constructor(props) {
        super(props);
    }

    preHandleData = (marketInfo: IReduxMarketInfo): preHandleAfter => {
        let coinTypes = AVALIABLE_COIN_TYPES;
        let res: preHandleAfter = {};
        for (let i = 0; i < coinTypes.length; i ++) {
            let type = coinTypes[i];
            let data = utilGetMarketInfoByCoinType(marketInfo, type, true);
            res[type] = data;
        }
        return res;
    }

    renderContent = () => {
        const marketData = this.preHandleData(this.props.marketInfo);
        const keys = AVALIABLE_COIN_TYPES;
        return (
            (
                <ScrollableTabView
                    style={{ marginTop: 0, height: 440 }}
                    initialPage={0}
                    tabBarUnderlineStyle={{ backgroundColor: '#3A62F0', height: 1 }}
                    tabBarActiveTextColor={'#3A62F0'}
                    tabBarInactiveTextColor={'#999999'}
                    tabBarBackgroundColor={'#FFFFFF'}
                    tabBarTextStyle={{
                        height: scaleSize(40),
                        lineHeight: scaleSize(40),
                        // width: scaleSize((deviceScreen.width) / 5),
                        fontSize: scaleFontSize(14),
                        textAlign: 'center'
                    }}
                    renderTabBar={() => <ScrollableTabBar style={{ height: 40 }} tabStyle={{ height: 40 }} />}
                >
                    {
                        keys.map((k, index) => {
                            return (
                                <View tabLabel={k} key={`CoinTypeSelectV-${index}`} style={{
                                    height: 300,
                                    width: 300,
                                }}>
                                    <CoinTypeSelectView data={marketData[k]} topType={k}  key={`CoinTypeSelectView-${index}`} onPress={
                                        this.props.onPress
                                    }/>
                                </View>
                            )
                        })
                    }
                </ScrollableTabView>
            )
        )
    }



    render() {
        return (
            <View  style={[{
                height: deviceScreen.height,
                width: deviceScreen.width - 100
            }]}>
                <View style={{
                    height: deviceScreen.height
                }}>
                    {
                        this.renderContent()
                    }
                </View>
            </View>
        )
    }
}

export default CoinTypeSelect;

interface CoinTypeSelectViewProps {
    data: Array<IReduxMarketItem>,
    onPress: onPressType,
    topType: string,
}

class CoinTypeSelectView extends Component<CoinTypeSelectViewProps, any>{

    constructor(props) {
        super(props);
    }

    renderItems = () => {
        const {data, topType} = this.props;
        return (
            <View style={{
                height: scaleSize(deviceScreen.height),
                width: scaleSize(300),
            }}>
                {
                    data.map((v, index) => {
                        return <CoinTypeSelectItem {...v} topType={topType} key={`CoinTypeSelectView-${index}`} onPress={
                            this.props.onPress
                        }/>
                    })
                }
            </View>
        )
    }

    render() {
        return (
            <View style={{
                width: scaleSize(144),
                height: scaleSize(40),
            }}>
                {
                    this.renderItems()
                }
            </View>
        )
    }

}

interface CoinTypeSelectItemProp {
    // payType: string, // 支付的货币类型
    type: string,  // targetType
    extent: string,
    value: string | number,
    onPress: onPressType,
    topType: string,
}

class CoinTypeSelectItem extends Component<CoinTypeSelectItemProp, any>{
    constructor(props) {
        super(props);
    }

    render() {
        const { type, extent, value , topType} = this.props;
        let textStyle = {color: '#02C389'};
        if (extent[0] == '-') {
            textStyle = {
                color: '#F25973'
            }
        }
        return (
            <TouchableOpacity onPress={() => {
                this.props.onPress(topType, type);
            }}>
            <View style={{
                display: 'flex',
                flexDirection: 'row',
                height: scaleSize(40),
                width: scaleSize(280),
                borderBottomWidth: 1,
                borderColor: '#F2F2F2',
                paddingLeft: scaleSize(10),
                paddingRight: scaleSize(10),
            }}>
                <Text style={[{
                    flex: 2,
                    lineHeight: scaleSize(40),
                }]}>
                    {type}
                </Text>

                <Text style={[{
                    flex: 2,
                    lineHeight: scaleSize(40),
                }, textStyle]}>
                    {value}
                </Text>

                <Text style={[{
                    flex: 1,
                    lineHeight: scaleSize(40),
                }, textStyle]}>
                    {extent}
                </Text>
            </View>
            </TouchableOpacity>
        )
    }
}